<template>
  <div class="body">
    <van-nav-bar
      title="职位"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-button type="primary" block>+发布职位</van-button>
    <div class="main" v-for="(item, index) in arr1" :key="index">
      <div>
        <span>{{ item.name }}(互联网)</span>
      </div>
      <div>
        {{ item.city }}<span>|</span>{{ item.time }}<span>|</span
        >{{ item.degree }}<span>|</span>
        {{ item.money }}
      </div>
      <div>
        <span>{{ item.company }}</span>
        <span>{{ item.people }}</span>
      </div>
      <van-button type="default">默认按钮</van-button>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "@vue/reactivity";

const arr1 = reactive([
  {
    name: "前端开发师",
    city: "广州",
    time: "1年经验",
    degree: "本科",
    company: "2人查看",
    money: "8k-10k",
    people: "1人已投递",
  },
  {
    name: "前端开发师",
    city: "广州",
    time: "1年经验",
    degree: "本科",
    company: "2人查看",
    money: "8k-10k",
    people: "1人已投递",
  },
  {
    name: "前端开发师",
    city: "广州",
    time: "1年经验",
    degree: "本科",
    company: "2人查看",
    money: "8k-10k",
    people: "1人已投递",
  },
  {
    name: "前端开发师",
    city: "广州",
    time: "1年经验",
    degree: "本科",
    company: "2人查看",
    money: "8k-10k",
    people: "1人已投递",
  },
  {
    name: "前端开发师",
    city: "广州",
    time: "1年经验",
    degree: "本科",
    company: "2人查看",
    money: "8k-10k",
    people: "1人已投递",
  },
]);
</script>

<style scoped>
.body {
  background-color: #f2f2f2;
}
.main {
  background-color: #fff;
  overflow: hidden;
  margin-bottom: 5.6667vw;
  position: relative;
  border-radius: 3vw;
}
.main .van-button {
  position: absolute;
  right: 1vw;
  top: 9vw;
  background-color: rgba(242, 242, 242, 1);
}
.main div:nth-child(1) {
  display: flex;
  width: 90%;
  margin: 0 auto;
  justify-content: space-between;
  margin-top: 3.6667vw;
  margin-bottom: 2vw;
}
.main div:nth-child(1) span {
  font-size: 4.3333vw;
}
.main div:nth-child(2) {
  margin-top: 2.6667vw;
  margin-left: 4.8333vw;
}
.main div:nth-child(2) span {
  margin: 0 1.8vw;
  color: #e4e4e4;
}
.main div:nth-child(3) {
  margin-left: 4.8333vw;
  margin-top: 2.6667vw;
  margin-bottom: 4vw;
}
.main div:nth-child(3) span:nth-child(1) {
  margin-right: 20.3333vw;
}
</style>
